<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}" />
    <link rel="stylesheet" th:href="@{/css/BVideo.css}" />
    <style>
        a{
            text-decoration: none;
            color: black;
        }
        .ss{
            float: left;
            margin-left: 25%;
            margin-top: 2%;
            width: 980px;
        }
        .ssk{
            padding-top: 0;
            height: 44px;
            margin-left: 189px;
            position: relative;
            width: 425px;
            float: left;
        }
        .ssk input{
            box-sizing: border-box;
            height: 42px;
            box-shadow: none;
            padding: 11px 15px;
            background: transparent;
            width: 424px;
            border: 2px solid #ccd0d7;
            border-radius: 4px;
            font-size: 16px;
            color: #222;

        }
        .button{
            float: left;
            color: #fff;
            background: #00a1d6;
            font-size: 16px;
            letter-spacing: 2px;
            line-height: 42px;
            text-align: center;
            width: 90px;
            border-radius: 4px;
        }
        .zzz{
            margin-top: 30px;
            float: left;
            width: 96%;
        }
        .zlnr{
            border-top: 1px solid #e5e9ef;
            height: 200px;
            margin-top: 45px;
        }

        .zlnrzuo{

            float: left;
            width: 70%;
        }
        .zlnryou{
            float: right;
            width: 30%;
        }
        .bt{
            height: 50px;
            margin-left: 21px;
            border-radius: 4px;
            overflow: hidden;
            margin-top: 20px;
        }
        .bt a{
            font-size: 20px;
            color: #00a1d6;
        }
        .nr{
            height: 40px;
            margin-left: 30px;
            margin-top: 4px;
            font-size: 12px;
            color: #99a2aa;
            letter-spacing: 0;
            line-height: 22px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .qt{
            height: 30px;
            margin-left: 20px;
            margin-top: 38px;
        }
        .qt img{
            height: 15px;
            width: 15px;
        }
        .qt span{
            margin-left: 30px;
        }
        .zlnryou img{
            margin-top: 25px;
            margin-left: 78px;
            width: 150px;
            height: 150px;
        }
        .button button{
            background-color: #00a1d6;
            border: 1px solid #00a1d6;
        }
        .qtimg1{
            border-radius: 50%;
        }
        #sname{
            margin: 0;
            float: left;
            box-sizing: border-box;
            height: 42px;
            box-shadow: none;
            padding: 11px 15px;
            background: transparent;
            width: 424px;
            border: 2px solid #ccd0d7;
            border-radius: 4px;
            font-size: 16px;
            color: #222;
        }
    </style>

</head>
<body>
<div class="container-fluid bmTopDiv">
    <div class="col-md-1 bmTopLogoFont">
        <h3>BhSyVideo</h3>
    </div>
    <div class="col-md-2 bmTopXxDiv">
        <ul class="">
            <li class="bmToplif"><a style="text-decoration: none;color: white" th:href="@{/bhsy/theMain}"> 首页</a></li>
        </ul>
    </div>
</div>
    <div class="ss">
        <form action="/Bsearch" style="float: left" method="post">

            <div class="ssk">
                <input type="text" id="sname">
            </div>
            <div class="button">
                <span style="cursor: pointer" id="butss">搜索</span>
            </div>
        </form>
        <div class="zzz">
            <div class="zlnr">
<!--                <div class="zlnrzuo">-->
<!--                    <div class="bt">-->
<!--                        <a class="bta1" href="#"></a>-->
<!--                    </div>-->
<!--                    <div class="nr">-->
<!--                        <span class="nrspan1"></span>-->
<!--                    </div>-->
<!--                    <div class="qt">-->
<!--                        <a class="qta1"><img class="qtimg1" th:src="" /><i class="qti1"></i></a>-->
<!--                        <span class="qtspan1"></span>-->
<!--                        <span class="qtspan2"><img class="qtimg2" src=""><i class="qti2"></i></span>-->
<!--                        <span class="qtspan3"><img class="qtimg3" src=""> <i class="qti3"></i></span>-->
<!--                        <span class="qtspan4"><img class="qtimg4" src=""><i class="qti4"></i></span>-->

<!--                    </div>-->
<!--                </div>-->
<!--                <div class="zlnryou">-->
<!--                    <a class="youa1"><img class="youimg1" src=""></a>-->
<!--                </div>-->
            </div>
        </div>

    </div>
</body>
<script th:src="@{/js/jquery-360.min.js}"></script>
<script>
    $(function () {
        $("#butss").click(function () {
            var sname= $("#sname").val();
            $(".zzz").html("");
            $.ajax({
                url:"/bhsy/ss",
                type:"get",
                data:{
                    "sname":sname
                },
                success:function (data) {
                    var list=data.map.list;
                    console.log(data)
                  for (let i=0;i<list.length;i++){
                      var zlnr=$('<div></div>').attr("class",'zlnr');
                      var zlnrzuo=$('<div></div>').attr("class",'zlnrzuo');
                      var zlnryou=$('<div></div>').attr("class",'zlnryou');
                      var youa1=$('<a></a>').attr("class",'youa1');
                      var youimg1=$('<img/>').attr("src","http://r1xjdohxw.hn-bkt.clouddn.com/"+list[i].simg).attr("class","youimg1");
                      var bt=$('<div></div>').attr("class",'bt');
                      var nr=$('<div></div>').attr("class",'nr');
                      var qt=$('<div></div>').attr("class",'qt');
                      var bta1=$('<a></a>').attr("href","/scolumn/"+list[i].uid+"/"+list[i].sid+"/"+list[i].sname).text(list[i].sname).attr("class",'bta1');
                      var nrspan1=$('<span></span>').text(list[i].smsg).attr("nrspan1",'nrspan1');
                      var qta1=$('<a></a>').attr("class",'qta1');
                      var qti1=$('<i></i>').text(list[i].uname).attr("class",'qti1');
                      var qti2=$('<i></i>').attr("class",'qti2');
                      var qti3=$('<i></i>').text(list[i].sup).attr("class",'qti3');
                      var qti4=$('<i></i>').attr("class",'qti4');
                      var qtimg1=$("<img/>").attr("src",list[i].uimg).attr("class",'qtimg1');
                      var qtimg2=$("<img/>").attr("src","/images/BColumn/liulanliang.png").attr("class",'qtimg2');
                      var qtimg3=$("<img/>").attr("src","/images/BColumn/dianzan.png").attr("class",'qtimg3');
                      var qtimg4=$("<img/>").attr("src","/images/BColumn/pinglun.png").attr("class",'qtimg4');
                      var qtspan1=$("<span></span>").text(list[i].stag).attr("class","qtspan1");
                      var qtspan2=$("<span></span>").attr("class","qtspan2");
                      var qtspan3=$("<span></span>").attr("class","qtspan3");
                      var qtspan4=$("<span></span>").attr("class","qtspan4");
                      $(".zzz").append(zlnr)
                      zlnr.append(zlnrzuo);
                      zlnr.append(zlnryou);
                      zlnryou.append(youa1);
                      zlnryou.append(youimg1);
                      zlnrzuo.append(bt);
                      zlnrzuo.append(nr);
                      zlnrzuo.append(qt);
                      bt.append(bta1);
                      nr.append(nrspan1);
                      qt.append(qta1);
                      qta1.append(qtimg1);
                      qtspan2.append(qtimg2);
                      qtspan3.append(qtimg3);
                      qtspan4.append(qtimg4);
                      qta1.append(qti1);
                      qtspan2.append(qti2);
                      qtspan3.append(qti3);
                      qtspan4.append(qti4);
                      qt.append(qtspan1);
                      qt.append(qtspan2);
                      qt.append(qtspan3);
                      qt.append(qtspan4);

                  }

                }
            })
        })
    })
</script>
</html>